<template>
	<view style="margin: 5%;">
		<view v-for="the_type, index in types" style="display: flex;margin-bottom: 2%;" @click="showDialog('checkInfo',index)">
			<uni-icons type="staff-filled" size="30"></uni-icons>
			<text>{{the_type["username"]}}</text>
			<text style="flex: 1; text-align: right;">{{type_num[the_type["username"]]}}</text>
		</view>
		
		<button style="margin-top: 10%;" @click="showDialog('alertDialog')">添加</button>
	
	<!-- 添加视图 -->
	<uni-popup ref="alertDialog" type="dialog" :mask-click="true">
		<uni-card style="width: 300px;">
			<text>添加分类</text>
			<uni-easyinput class="uni-mt-5" trim="all" v-model="FormData.username" placeholder="请输入分类"></uni-easyinput>
			<button @click="submit('alertDialog')" class="popup_button">确认添加</button>
			<button @click="closeDialog('alertDialog')" class="popup_button">取消</button>
		</uni-card>
	</uni-popup>
	
	<!-- 编辑视图 -->
	<uni-popup ref="checkInfo" type="dialog" :mask-click="true">
		<uni-card style="width: 300px;">
			<text class="uni-h6">编辑分类</text>
				<uni-easyinput v-model="InfoData.username" placeholder="请输入分类" />
			<button @click="submit('checkInfo')" class="popup_button">确定</button>
			<button @click="closeDialog('checkInfo')" class="popup_button">删除</button>
		</uni-card>
	</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type_num:{},
				baseurl:"http://localhost:8000/",
				types:[],
				FormData:{"username":"","userid":0},
				InfoData:{"username":""},
				
			}
		},
		methods: {
			showDialog(type, index){
				if (type=="alertDialog"){
					this.FormData.username="";
					this.$refs.alertDialog.open();
				}
				else if (type=="checkInfo"){
					Object.assign(this.InfoData, this.types[index]);
					console.log(this.InfoData.username)
					this.$refs.checkInfo.open();
				}
				
			},
			submit(type){
				if (type=="alertDialog"){
					uni.request({
					    url: this.baseurl+'types/addtypes/', 
						method:'POST',
						data:this.FormData,
					    success: (res) => {
							console.log(1)
							if (res.data.code=='0000'){
								this.getTypes();
								this.type_num[this.FormData.username] = 0;
							}	
					    },
						fail() {
							console.log("fail");
							this.$refs.alertDialog.close();
						}
					});	
					this.$refs.alertDialog.close();
				}
				else if (type=="checkInfo"){
					uni.request({
					    url: this.baseurl+'types/updateTypes/', 
						method:'PUT',
						data:this.InfoData,
					    success: (res) => {
							if (res.data.code=='0000'){
								this.getTypes();
							}	
					    },
						fail() {
							console.log("fail");
							this.$refs.alertDialog.close();
						}
					});	
					this.$refs.checkInfo.close();
				}
			},
			getTypes(){
				console.log(1);
				uni.request({
				    url: this.baseurl+'types/selectall/', 
					method:'GET',
				    success: (res) => {
						console.log(1)
						if (res.data.code=='0000'){
							this.types=res.data.data;
						}	
				    },
					fail() {
						console.log("fail");
						this.$refs.alertDialog.close();
					}
				});		
			},
			closeDialog(type){
				if (type=="alertDialog"){
					this.$refs.alertDialog.close();
				}
				else if (type=="checkInfo"){
					// 删除
					uni.request({
					    url: this.baseurl+'types/deletetypes/?user_id='+this.InfoData.userid, 
						method:'DELETE',
					    success: (res) => {
							console.log(1);
							if (res.data.code=='0000'){
								this.getTypes();
							}	
					    },
						fail() {
							console.log("fail");
							this.$refs.alertDialog.close();
						}
					});		
					this.$refs.checkInfo.close();
				};
			}
		},
		mounted() {
			this.getTypes();
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			console.log(option.data)
			this.type_num=JSON.parse(option.data)
		}
	}
</script>

<style>
	.popup_info{
		margin: 5% 0;
	}
	
	.popup_button{
		margin: 3% 2%;
	}
</style>
